<template>
  <div class="text-center">
    <div class="font-bold mt-3" style="font-size: 13px">
      华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
    </div>
    <div class="">
      <span class="text-gray-400" style="font-size: 10px">促销价</span>
      <span class="text-red-700" style="font-size: 20px"> ¥499.00</span>
      <span class="ml-3 text-gray-400" style="font-size: 10px">原价</span>
      <del style="font-size: 10px"> ¥599.00</del>
    </div>
    <el-row style="font-size: 10px" class="mt-4">
      <el-col :span="7" :offset="1" class="text-center border-r border-solid">
        <div class="">
          <span>月销量</span>
          <span class="text-red-700 font-bold">1015</span>
        </div>
      </el-col>
      <el-col :span="7" :offset="1" class="text-center border-r border-solid">
        <div class="">
          <span>累计销量</span>
          <span class="text-red-700 font-bold">6015</span>
        </div>
      </el-col>
      <el-col :span="7" :offset="1" class="text-center border-r border-solid">
        <div class="">
          <span>累计评价</span>
          <span class="text-red-700 font-bold">640</span>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-row style="font-size: 12px" class="mt-3 pt-3 pb-3 border-t border-b border-solid ml-5 mr-5">
    <el-col :span="20">
      <div class="text-gray-400">可选规格</div>
    </el-col>
    <el-col :span="2" :offset="2">
      <div style="font-size: 10px"> ></div>
    </el-col>
  </el-row>
  <el-row class="mt-3 ml-5" style="font-size: 13px">
    <el-col :span="5">
      <div class="text-gray-400">店铺优惠</div>
    </el-col>
    <el-col :span="15" :offset="1">
      <div class="text-orange-500" style="font-size: 14px">购物满2件打8折，满3件7折</div>
    </el-col>
  </el-row>
  <div class="font-bold text-red-700 ml-5 mt-4 pb-2 border-b border-solid" style="font-size: 17px">优惠套装</div>
  <div class="flex items-center ml-5">
    <div>
      <img src="../assets/taozhuang01.jpg">
      <div class="text-red-700 font-bold text-center mt-2">¥ 29.90</div>
    </div>
    <div class="font-bold text-2xl">+</div>
    <div>
      <img src="../assets/taozhuang02.jpg">
      <div class="text-red-700 font-bold text-center mt-2">¥ 8.90</div>
    </div>
    <div class="font-bold text-xl">=</div>
    <div class="text-red-700 font-bold text-center mt-2"> ¥8.90</div>
  </div>
  <div class="text-gray-400 ml-5 " style="font-size: 13px">共省:￥463.00</div>
  <div class="text-center">
    <el-button type="danger" size="mini">立即购买</el-button>
  </div>
  <el-row class="mt-5 relative pt-2 border-t border-solid mr-5">
    <el-col :span="7" :offset="1" class="cursor-pointer" @click="showType=0">
      <div class="text-center">宝贝详情</div>
    </el-col>
    <el-col :span="7" :offset="1" class="cursor-pointer" @click="showType=1">
      <div class="text-center">全部评价</div>
    </el-col>
    <el-col :span="7" :offset="1" class="cursor-pointer" @click="showType=2">
      <div class="text-center">猜你喜欢</div>
    </el-col>
    <div class="ml-3 h-1 absolute -bottom-2 bg-orange-600 rounded-md transform duration-500" style="width: 78px"
         :style="{'--tw-translate-x': showType*95+'px'}"></div>
  </el-row>
  <div v-if="showType===0">
    <div class="ml-3 mt-5" style="font-size: 15px">
      <div class="border-solid border-b border-orange-200 pr-4 pb-3 font-light" style="width: 100px">产品参数：</div>
    </div>
    <div class="pl-10 pt-4 leading-7" style="font-size: 14px">
      <div class="text-gray-400">
        商品名称: 华为荣耀7(PLK-AL10)
      </div>
      <div class="text-gray-400">
        商品编号: 1684485
      </div>
      <div class="text-gray-400">
        商品毛重: 157.00g
      </div>
      <div class="text-gray-400">
        商品产地: 中国大陆
      </div>
      <div class="text-gray-400">
        系统: 安卓（Android）
      </div>
      <div class="text-gray-400">
        运行内存: 3GB
      </div>
      <div class="text-gray-400">
        像素: 1600万以上
      </div>
      <div class="text-gray-400">
        电池容量： 3000mAh-3999mAh
      </div>
      <div class="text-gray-400">
        机身颜色： 金色
      </div>
    </div>
    <div class="ml-3 mt-10" style="font-size: 15px">
      <div class="border-solid border-b border-orange-200 pr-4 pb-3 font-light" style="width: 100px">商品细节：</div>
    </div>
    <img src="../assets/tw1.jpg"/>
    <img src="../assets/tw2.jpg"/>
    <img src="../assets/tw3.jpg"/>
    <img src="../assets/tw4.jpg"/>
    <img src="../assets/tw5.jpg">

  </div>
  <div v-else-if="showType===1">
    <div class="ml-5 mt-7">
      <div class="font-bold text-red-700">买家印象</div>
      <el-row>
        <el-tag size="mini" type="danger" class="mt-3 ml-1">性价比高(2177)</el-tag>
        <el-tag size="mini" type="danger" class="mt-3 ml-1">系统流畅(1860)</el-tag>
        <el-tag size="mini" type="danger" class="mt-3 ml-1">外观漂亮(1823)</el-tag>
        <el-tag size="mini" type="danger" class="mt-3 ml-1">功能齐全(1689)</el-tag>
      </el-row>
      <el-row class="mt-7" style="font-size: 10px">
        <el-col :span="6">
          <div>全部评价(32)</div>
        </el-col>
        <el-col :span="6">
          <div class="text-center">好评(32)</div>
        </el-col>
        <el-col :span="6">
          <div class="text-center">中评(32)</div>
        </el-col>
        <el-col :span="6">
          <div class="text-center">差评(32)</div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mt-7" style="font-size: 13px">
        <el-col :span="3">
          <div>
            <img src="../assets/hwbn40x40.jpg" class="rounded-full">
          </div>
        </el-col>
        <el-col class="relative" :span="20">
          <div class="border border-solid pl-2 pr-2 pt-3 pb-3 overflow-hidden whitespace-nowrap"
               style="background-color: #f8f8f8;text-overflow: ellipsis">
            <span class="font-bold text-gray-400"> b***1 (匿名)</span>
            评论于
            <span class="font-light text-gray-400">2015年11月02日 17:46</span>
          </div>
          <div class="h-28 flex pl-2 pr-2 border border-t-0 border-solid flex-col justify-center"
               style="border-color: #eee">
            <div>
              帮朋友买的，没拆开来看，据说还不错，很满意！
            </div>
            <div class="mt-3">
              颜色分类：金 电信4G
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="text-center">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="100" small>
      </el-pagination>
    </div>
    <div class="font-light mt-6 ml-2 mr-2 text-center"
         style="border: 1px solid rgb(255, 204, 119);background-color: #ffffee">
      购买前请查看该商品的 <span class="font-bold">购物保障</span>，明确您的售后保障权益。
    </div>
  </div>
  <div v-else-if="showType===2">
    <el-row>
      <el-col :span="11" class="text-center mt-6" style="font-size: 13px" :offset="1" v-for=" i in 30">
          <img src="../assets/shopcartImg.jpg" />
          <div>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</div>
          <div>¥ 498.00</div>
      </el-col>
    </el-row>
    <el-pagination class="mt-3"
        background
        layout="prev, pager, next"
        :total="100" small>
    </el-pagination>
  </div>
  <el-row class="mt-10 mb-10 justify-center">
    <el-col :span="7" style="font-size: 10px">
      <div class="text-center cursor-pointer" @click="goToBlog">Heaven's Blog |</div>
    </el-col>
    <el-col :span="5" class="ml-1 text-center cursor-pointer" @click="goToIndex" style="font-size: 10px">
      商城首页 |
    </el-col>
    <el-col :span="4" class="ml-1 text-center cursor-pointer" style="font-size: 10px">
      支付宝 |
    </el-col>
    <el-col :span="4" class="ml-1 text-center cursor-pointer" style="font-size: 10px">
      物流查询
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {ref, Ref} from "vue";
import {useRouter} from "vue-router";

(function (){
  let top = document.documentElement.scrollTop || document.body.scrollTop;
  document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
})()
const $router = useRouter();
let showType: Ref<number> = ref(0);

function goToBlog() {
  window.location.href = "https://hwawy.cn/"
}



function goToIndex() {
  $router.push({
    name: 'mobileIndex'
  })
}
</script>

<style scoped>
.triangle {
  width: 0;
  height: 0;
  border: 5px solid;
  border-color: transparent red transparent transparent;
}
</style>